import React, {useEffect} from 'react';
import {Popover, Space} from 'antd';
import { useSelector } from 'react-redux';
import IntlMessages from '@iso/components/utility/intlMessages';
import TopbarDropdownWrapper from './TopbarDropdown.styles';
import {Link} from "react-router-dom";
import axios from "../../http";
import Qs from 'qs'

/**const demoNotifications = [
    {
        id: 1,
        name: 'David Doe',
        notification:
            'A National Book Award Finalist An Edgar Award Finalist A California Book Award Gold Medal Winner',
    }
];**/

export default function TopbarNotification() {
  const [visible, setVisiblity] = React.useState(false);
    const [demoNotifications, setDemoNotifications] = React.useState([]);

  const customizedTheme = useSelector(state => state.ThemeSwitcher.topbarTheme);

   const loadData=()=>{
        axios.post('api/core/notice/findMyUnReadByPage', Qs.stringify({
            page: 0,
            size: 10,
            title:''
        }),{headers: {'Content-Type': 'application/x-www-form-urlencoded'}})
            .then((response)=>{

                let  data=response.data

                let  dataList=data.data.content;

                let demoNotifications=[];
                for(let i=0;i<dataList.length;i++){
                    let dataItem=dataList[i];
                    let notification= {
                        id: dataItem["id"],
                        name: dataItem["title"],
                        notification: '',
                        publishedCode:dataItem["publishedCode"]
                    }
                    demoNotifications.push(notification);
                }

                setDemoNotifications(demoNotifications);
                //let totalElements=data.data.totalElements;

                //this.setState({dataList:dataList,totalElements:totalElements});
            })
            .catch(function (error) {
                console.log(error);
            });

    }

    useEffect(()=>{
        loadData()
    },[])

  function handleVisibleChange() {
    setVisiblity(visible => !visible);
  }

  const content = (
    <TopbarDropdownWrapper className="topbarNotification">
      <div className="isoDropdownHeader">
        <h3>
          通知
        </h3>
      </div>
      <div className="isoDropdownBody">
        {demoNotifications?.map(notification => (
            <Link to={{pathname:'/main/core/notice/view/'+notification.publishedCode,state:{publishedCode:notification.publishedCode}}} >
                <a className="isoDropdownListItem" key={notification.id} href="# ">
                    <h5>{notification.name}</h5>
                    <p>{notification.notification}</p>
                </a>
            </Link>

        ))}
      </div>
        <Link to={{pathname:'/main/core/notice/mine'}} >
            <a className="isoViewAllBtn" >
                查看所有
            </a>
        </Link>

    </TopbarDropdownWrapper>
  );
  return (
    <Popover
      content={content}
      trigger="click"
      visible={visible}
      onVisibleChange={handleVisibleChange}
      placement="bottomLeft"
    >
      <div className="isoIconWrapper">
        <i
          className="ion-android-notifications"
          style={{ color: customizedTheme.textColor }}
        />
        <span>{demoNotifications?.length}</span>
      </div>
    </Popover>
  );
}
